<template>
	<a-card style="margin: -15px">
  <a-row style="margin-bottom: 1rem">
    <!--放置搜索条件-->
    <a-col :span="3">
      <a-select
          ref="select"
          v-model:value=this.request.status
          style="width: 100px; margin-top: 4px"
          @focus="focus"
          @change="handleChange"
          placeholder="状态"
      >
        <a-select-option value="0">待支付</a-select-option>
        <a-select-option value="1">已支付</a-select-option>
        <a-select-option value="2">已取消</a-select-option>
        <a-select-option value="">全部</a-select-option>

      </a-select>
    </a-col>
    <a-col :span="6">
      <a-input-search
          v-model:value="this.request.phone"
          placeholder="请输入会员手机号"
          enter-button="搜索"
          size="large"
          @search="onSearch"
      />
    </a-col>
  </a-row>
  <a-row style="margin-bottom: 1rem">
    <a-col :span="24">
      <a-table :columns="columns" :data-source="sellData" :pagination="false" @change="onChange">
        <template #bodyCell="{ column, record }">
          <!--藏品-->
          <template v-if="column.key === 'nft'">
            <a-row style="margin-top: 0.5rem">
              <a-col>
                <img :src="record.cover" width="50" height="50">
              </a-col>
              <a-col style="margin: auto">
                <a @click="getNft(record.nftId)">{{ record.name }}</a>
              </a-col>
            </a-row>
          </template>

          <!--买家-->
          <template v-if="column.key === 'buyer'">
            <a-row style="margin-top: 0.5rem">
              <a-col>
                <img :src="record.buyerAvatar" width="50" height="50">
              </a-col>
              <a-col style="margin: auto">
                <a @click="getMB(record.buyerId)"> {{ record.buyerName }} </a>
                <br/>
                {{ record.buyerPhone }}
              </a-col>
            </a-row>
          </template>

          <!--卖家-->
          <template v-if="column.key === 'seller'">
            <a-row style="margin-top: 0.5rem">
              <a-col>
                <img :src="record.sellAvatar" width="50" height="50">
              </a-col>
              <a-col style="margin: auto">
                <a @click="getMB(record.sellId)">{{ record.sellName }} </a>
                <br/>
                {{ record.sellPhone }}
              </a-col>
            </a-row>
          </template>

          <!--操作-->
          <template v-if="column.key === 'action'">
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="getSell(record.id)">查看</a-menu-item>
                  <a-menu-item key="2" @click="getOrder(record.id)">支付信息</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined/>
              </a-button>
            </a-dropdown>
          </template>
          <!--状态-->
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.status==0" :bordered="false" color="default">待支付</a-tag>
            <a-tag v-if="record.status==1" :bordered="false" color="success">已支付</a-tag>
            <a-tag v-if="record.status==2" :bordered="false" color="error">已取消</a-tag>
          </template>

        </template>
      </a-table>
    </a-col>
  </a-row>
	<a-flex justify="flex-end">
		<a-pagination
			size="small"
			@change="onChange"
			show-size-changer
			:pageSizeOptions="['5','10','20','50','100']"
			v-model:current="this.page.pageNo"
			v-model:page-size="this.page.pageSize"
			:total="this.page.total"
			:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
	</a-flex>


  <!--  查看详情-->
  <template>
    <div>
      <a-modal v-model:open="this.sellopen" width="700px" title="寄售订单信息" :footer="null">
        <br/>
        <a-card>
          <a-descriptions :column=3>
            <a-descriptions-item>
              <a-card hoverable title="买家信息" style="width: 150px">
                <template #cover>
                  <img alt="example" :src="getSellData.sellAvatar" style="width: 150px;height: 150px"/>
                </template>
                <a-descriptions-item label="买家名称">{{ getSellData.sellName }}</a-descriptions-item>
                <br>
                <a-descriptions-item label="手机号">{{ getSellData.sellPhone }}</a-descriptions-item>
              </a-card>

              <a-card hoverable title="卖家信息" style="width: 150px;margin-left: 75px">
                <template #cover>
                  <img alt="example" :src="getSellData.buyerAvatar" style="width: 150px;height: 150px"/>
                </template>
                <a-descriptions-item label="买家名称">{{ getSellData.buyerName }}</a-descriptions-item>
                <br>
                <a-descriptions-item label="手机号">{{ getSellData.buyerPhone }}</a-descriptions-item>
              </a-card>

              <a-card hoverable title="藏品信息" style="width: 150px;margin-left: 75px">
                <template #cover>
                  <img alt="example" :src="getSellData.cover" style="width: 150px;height: 150px"/>
                </template>
                <a-descriptions-item label="藏品名称"> <a @click="getNft(getSellData.nftId)">{{ getSellData.name }}</a></a-descriptions-item>
                <br>
                <a-descriptions-item>数量 : 1</a-descriptions-item>
              </a-card>
            </a-descriptions-item>
          </a-descriptions>
          <a-card hoverable :title="'订单编号:'+getSellData.id">
            <a-descriptions :column=2>

              <a-descriptions-item label="链上地址">{{ getSellData.chainAddr }}</a-descriptions-item>
              <a-descriptions-item label="合约地址">{{ getSellData.contractAddr }}</a-descriptions-item>

              <a-descriptions-item label="支付状态">
                <a-tag v-if="getSellData.status==0" :bordered="false" color="default">待支付</a-tag>
                <a-tag v-if="getSellData.status==1" :bordered="false" color="success">已支付</a-tag>
                <a-tag v-if="getSellData.status==2" :bordered="false" color="error">已取消</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="订单金额">{{ getSellData.ordersAmount }}</a-descriptions-item>
              <a-descriptions-item label="实付金额">{{ getSellData.payAmount }}</a-descriptions-item>
              <a-descriptions-item label="寄售金额">{{ getSellData.nftSellPrice }}</a-descriptions-item>
              <a-descriptions-item label="创建人">{{ getSellData.createUser }}</a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ getSellData.createTime }}</a-descriptions-item>
              <a-descriptions-item label="更新人">{{ getSellData.updateUser }}</a-descriptions-item>
              <a-descriptions-item label="更新时间">{{ getSellData.updateTime }}</a-descriptions-item>

            </a-descriptions>
          </a-card>
        </a-card>
      </a-modal>
    </div>


  </template>

  <!--  订单支付查看详情-->
  <template>
    <div>
      <a-modal v-model:open="this.sellOrder" width="700px" title="订单支付信息" :footer="null">

        <a-card hoverable :title="'交易流水号 :'+item.traSerNum" v-for=" item in getSellOrder " style="margin: 1rem">
          <a-descriptions :column=2>
            <a-descriptions-item label="支付方式">
              <a-tag v-if="item.payManner==0" :bordered="false" color="orange">微信</a-tag>
              <a-tag v-if="item.payManner==1" :bordered="false" color="orange">支付宝</a-tag>
              <a-tag v-if="item.payManner==2" :bordered="false" color="orange">银联</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="支付账户">{{ item.payAccoun }}</a-descriptions-item>

            <a-descriptions-item label="支付类型">
              <a-tag v-if="item.payType==0" :bordered="false" color="orange">网站支付</a-tag>
              <a-tag v-if="item.payType==1" :bordered="false" color="orange">App支付</a-tag>
              <a-tag v-if="item.payType==2" :bordered="false" color="orange">扫码支付</a-tag>
            </a-descriptions-item>

            <a-descriptions-item label="支付状态">
              <a-tag v-if="item.status==0" :bordered="false" color="error">支付失败</a-tag>
              <a-tag v-if="item.status==1" :bordered="false" color="success">支付成功</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="付款时间">{{ item.paymentTime }}</a-descriptions-item>
            <a-descriptions-item label="实付金额">{{ item.paymentAmount }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-modal>
    </div>
  </template>

  <GetMb ref="getMb"/>
  <GatNftInfo ref="getNft"/>
	</a-card>
</template>


<script>
import {DownOutlined, PlusOutlined} from "@ant-design/icons-vue";
import SellNft from "@/api/nft/order/SellNft";

export default {
  name: "SellNft",
  components: {
    DownOutlined,
    PlusOutlined
  },
  data() {
    return {
      sellopen: false,
      sellOrder: false,
      pagination: 11,
      page: {
        pageNo: 1,
        pageSize: 5,
        total: '',
      },
      request: {
        status: '',
        phone: null
      },
      columns: [
        {
          title: '订单编号',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '藏品',
          dataIndex: 'nft',
          key: 'nft',
        },
        {
          title: '买家',
          dataIndex: 'buyer',
          key: 'buyer',
        },
        {
          title: '卖家',
          dataIndex: 'seller',
          key: 'seller',
        },
        {
          title: '订单金额',
          dataIndex: 'payAmount',
          key: 'payAmount',
        },
        {
          title: '订单状态',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: '订单时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '操作',
          key: 'action',
        },
      ],
      sellData: [],
      getSellData: [],
      getSellOrder: [],
    }
  },
  methods: {
    getMB(id) {
      this.$refs.getMb.showGetMb(id);
    },
    getNft(id) {
      this.$refs.getNft.getNft(id);
    },
    //搜索之前先把页码置为1[查询列表]//所搜
    onSearch() {
      this.page.pageNo = 1;
      this.query();
      debugger
    },
    handleChange() {
      this.query();
    },
    //分页组件
    onChange(pageNo) {
      this.query();
      this.page.pageNo = pageNo;
    },
    //搜索事件
    query() {
      debugger
		SellNft.query(this.page.pageNo,this.page.pageSize,this.request).then((resp) => {
			debugger
			this.page.pageSize = resp.size;
			this.page.total = resp.total;
			this.sellData = resp.records;
		})

    },
    getSell(id) {
      this.sellopen = true;
		SellNft.getSell(id).then((resp) => {
			debugger
			this.getSellData = resp;
		})
    },
    getOrder(id) {
      this.sellOrder = true;
		SellNft.getOrder(id).then((resp) => {
			debugger
			this.getSellOrder = resp;
		})
    },
  },
  mounted() {
    this.query();
  }
}
</script>


<style scoped>


</style>
